<template>
  <div class="outside">
    <!--<viewhand :deleteids="this.needid"></viewhand>-->
    <el-row :gutter="20" class="seachnav">
      <el-col :xs="7" :sm="6" :md="5" :lg="6" :xl="3">
        <span><img :src="returnnormalpress" class="returnnormalpress"/></span>
        <span><img :src="titles" class="equiplist"/><div style="margin-top: 2px;float: right;"><span style="font-size: 18px; margin-left: 10px;">日历</span></div></span>
      </el-col>
    </el-row>
    <el-tabs style="padding-top: 20px" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="日历" name="first">
        <div class="tabStyle">
          <div class="organizationOutMore">
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item class="handItem">
                <el-date-picker
                  class="timeSelect"
                  v-model="value1"
                  type="month"
                  format="yyyy-MM"
                  value-format="yyyy-MM"
                  @change="selectiveResponse"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item class="handItem"><div class="legend yearssty"><img style="float: left; margin-top: 4px; margin-right: 5px;" :src="yearspic"/>年审到期</div></el-form-item>
              <el-form-item class="handItem"><div class="legend warrantysty"><img style="float: left; margin-top: 4px; margin-right: 5px;" :src="warrantypic"/>维保到期</div></el-form-item>
              <el-form-item class="handItem"><div class="legend componentssty"><img style="float: left; margin-top: 4px; margin-right: 5px;" :src="componentspic"/>零配件到期</div></el-form-item>
            </el-form>
          </div>
          <div class="organizationTable">
            <full-calendar :events="fcEvents" @changeMonth="changeMonth" @goPrev="goPrev" @goNext="goNext" locale="fr" style="max-width: 100%; height: 700px;padding: 0px"></full-calendar>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="列表" name="second">
        <div class="tabStyle">
          <ul class="dataBody">
            <li class="alarmBody clearfix" v-for="(item, index) in courseSubList" :key="item.id">
              <div style="padding-left: 14px" class="alarmTitle">
                <div class="leftIcon" @click="showHide(index)" >
                  <i class="el-icon-caret-right" ref="arrow"></i>
                </div>
                <div class="rightTitle">
                  <!--<span class="alarmDate">{{index+1}}</span>-->
                  <span class="alarmDate">{{item.date}}</span>
                </div>
              </div>
              <div ref="child" style="display: none" class="alarmContent">
                <el-table
                  :data="item.msg"
                  :show-header="false"
                  ref="checkTest"
                  style="width: 100%">
                  <el-table-column label="" width="30px">
                    <template slot-scope="scope">
                      <img v-if="scope.row.type === '零配件到期'" class="circle" :src="componentsicon"/>
                      <img v-if="scope.row.type === '维保到期'" class="circle" :src="warrantyicon"/>
                      <img v-if="scope.row.type === '年审到期'" class="circle" :src="yearsicon"/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="date" width="200px"></el-table-column>
                  <el-table-column prop="title" min-width="300px"></el-table-column>
                </el-table>
              </div>
            </li>
          </ul>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import fullCalendar from 'vue-fullcalendar'
  // import axios from 'axios'
  import titles from '@/assets/calendar/calendar_icon.png'
  import returnnormalpress from '@/assets/reports/invalid.png'
  import equiplist from '@/assets/equipv2/equiplist.png'
  import componentspic from '@/assets/calendar/components_expire.png'
  import warrantypic from '@/assets/calendar/warranty_expire.png'
  import yearspic from '@/assets/calendar/years_expire.png'
  import componentsicon from '@/assets/calendar/components_icon.png'
  import warrantyicon from '@/assets/calendar/warranty_icon.png'
  import yearsicon from '@/assets/calendar/years_icon.png'
  import axios from 'axios'
  export default {
    components: {
      fullCalendar,
      'full-calendar': require('vue-fullcalendar')
    },
    data() {
      return {
        returnnormalpress,
        equiplist,
        titles,
        componentspic,
        warrantypic,
        yearspic,
        componentsicon,
        warrantyicon,
        yearsicon,
        value1: '',
        thismonth: '',
        activeName: 'first',
        fcEvents: [],
        name: 'Sunny!',
        fcEvents: [],
        tpl: 0,
        itemLimit: 9,
        monthTitle: '',
        btnStatus: '1',
        // 列表
        courseSubList: [
          {
            date: '',
            total: 0,
            msg: []
          },
          {
            date: '',
            total: 0,
            msg: []
          },
          {
            date: '',
            total: 0,
            msg: []
          },
          {
            date: '',
            total: 0,
            msg: []
          }
        ],
        warningID: [],
        isIndeterminate: true,
        // localStorage.getItem('access_token')
        // 日历接口
        submitCalendars: {
          access_token: window.localStorage.getItem('access_token'),
          type: 'remind_calendar',
          date: ''
        },
        // 列表接口
        fittingData: {
          access_token: localStorage.getItem('access_token'),
          type: 'remind_fittings_get'
        }
      }
    },
    created() {
      this.firstDate()
    },
    methods: {
      firstDate() {
        this.submitCalendars.date = [new Date().getFullYear() + '-' + (new Date().getMonth() + 1)]
        this.getCalendarData()
      },
      getCalendarData() {
        if (this.value1) {
          this.submitCalendars.date = this.value1
        }
        axios.post('/equipmanage/v2', this.submitCalendars, {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then((res) => {
          for (let a = 0; a < res.data.datas.length; a++) {
            res.data.datas[a].start = res.data.datas[a].date
            if (res.data.datas[a].type === '年审到期') {
              res.data.datas[a].cssClass = 'years'
            } else if (res.data.datas[a].type === '维保到期') {
              res.data.datas[a].cssClass = 'warranty'
            } else if (res.data.datas[a].type === '零配件到期') {
              res.data.datas[a].cssClass = 'components'
            }
            res.data.datas[a].title = ' ' + res.data.datas[a].title + ' ' + res.data.datas[a].subhead + ' ' + res.data.datas[a].type
          }
          this.fcEvents = res.data.datas
        })
          .catch((error) => {
            this.$message.error(error.data.errmsg)
            this.fcEvents = []
          })
      },
      handleClick(activeName) {
        if (activeName.name === 'first') {
          this.getCalendarData()
        } else {
          this.getWarning()
        }
      },
      selectiveResponse() {
        if (this.value1 > this.thismonth) {
          this.goNext()
        } else if (this.value1 < this.thismonth) {
          this.goPrev()
        } else {
          this.getCalendarData()
        }
      },
      /* 日历插件事件 */
      // 下一月
      goPrev() {
        this.$children[1].$children[1].$children[1].$children[0].goPrev()
        this.selectiveResponse()
      },
      // 上一月
      goNext() {
        this.$children[1].$children[1].$children[1].$children[0].goNext()
        this.selectiveResponse()
      },
      // 月份改变
      changeMonth(start, end, current) {
        // this.monthTitle = foramatData(current, 'MMMM YYYY')
        this.thismonth = current.slice(0, 7)
        this.submitCalendars.date = this.thismonth
        this.getCalendarData()
      },
      /* 列表相关 */
      showHide(index) {
        if (this.$refs.child[index].style.display === 'none') {
          this.submitCalendars.date = this.courseSubList[index].date
          axios.post('/equipmanage/v2', this.submitCalendars, {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded'
            }
          }).then((res) => {
            this.courseSubList[index].msg = res.data.datas
            for (let c = 0; c < this.courseSubList[index].msg.length; c++) {
              this.courseSubList[index].msg[c].title = this.courseSubList[index].msg[c].title + ' ' + this.courseSubList[index].msg[c].subhead + ' ' + this.courseSubList[index].msg[c].type
            }
          })
            .catch((error) => {
              this.$message.error(error.data.errmsg)
            })
          this.$refs.child[index].style.display = 'block'
          this.$refs.arrow[index].className = 'el-icon-caret-bottom'
        } else {
          this.$refs.child[index].style.display = 'none'
          this.$refs.arrow[index].className = 'el-icon-caret-right'
        }
      },
      // 获取月份
      getWarning() {
        // 计算当前月和后三月 遵循yyyy-MM格式
        var firstMonth = [new Date().getFullYear() + '-' + (new Date().getMonth() + 1)]
        if (String(parseInt(firstMonth[0].slice(5, 7)) + 1).length === 1) {
          firstMonth[0] = (firstMonth[0].slice(0, 4) + '-0' + parseInt(firstMonth[0].slice(5, 7)))
        }
        this.courseSubList[0].date = firstMonth[0]
        for (let b = 0; b < 3; b++) {
          if ((parseInt(firstMonth[b].slice(5, 7)) + 1) < 12) {
            if (String(parseInt(firstMonth[b].slice(5, 7)) + 1).length === 1) {
              this.courseSubList[b + 1].date = (firstMonth[b].slice(0, 4) + '-0' + (parseInt(firstMonth[b].slice(5, 7)) + 1))
              firstMonth.push(firstMonth[b].slice(0, 4) + '-0' + (parseInt(firstMonth[b].slice(5, 7)) + 1))
            } else {
              this.courseSubList[b + 1].date = (firstMonth[b].slice(0, 4) + '-' + (parseInt(firstMonth[b].slice(5, 7)) + 1))
              firstMonth.push(firstMonth[b].slice(0, 4) + '-' + (parseInt(firstMonth[b].slice(5, 7)) + 1))
            }
          } else {
            this.courseSubList[b + 1].date = ((parseInt(firstMonth[b].slice(0, 4)) + 1) + '-' + '01')
            firstMonth.push((parseInt(firstMonth[b].slice(0, 4)) + 1) + '-' + '01')
          }
        }
      }
    }
  }
</script>

<style scoped>
  /*顶部start*/
  .outside {
    padding: 0px 20px 20px 20px;
    background: #EFEFEF;
  }
  .organizationOutMore{
    width: 100%;
    height: 40px;
    background-color: #ffffff;
    padding-left: 10px;
  }
  /*到期类型注释*/
  /deep/ .componentssty {
    background-color: #A971EA;
    width: 115px;
  }
  /deep/ .warrantysty {
    background-color: #FF9248;
    width: 100px;
  }
  /deep/ .yearssty {
    background-color: #F43B42;
    width: 100px;
  }
  /*tab标签页相关*/
  /deep/ .el-tabs__active-bar {
    color: #409EFF;
    background-color: #409EFF;
  }
  /deep/ .el-tabs__item:hover {
    color: #409EFF;
  }
  /deep/ .el-tabs__item.is-active {
    color: #409EFF;
    font-weight: bold;
  }
  /deep/ .el-tabs__nav-wrap::after {
    background-color: transparent;
  }
  /*full-calendar日历插件区分到期类型*/
  /deep/ .years {
    background-color: #F43B42!important;
    color: white!important;
    text-align: right;
    background: url('../../assets/calendar/years_expire.png') no-repeat left;
  }
  /deep/ .warranty {
    background-color: #FF9248!important;
    color: white!important;
    text-align: right;
    background: url('../../assets/calendar/warranty_expire.png') no-repeat left;
  }
  /deep/ .components {
    background-color: #A971EA!important;
    color: white!important;
    text-align: right;
    background: url('../../assets/calendar/components_expire.png') no-repeat left;
  }
  /deep/ .week-row:nth-child(2n) {
      background-color: #F7F8F9;
    }
  /*杂项*/
  .tabStyle {
    height: 830px;
    width: 100%;
    background-color: white;
  }
  /deep/ label {
    font-weight: normal;
    color: #69727E;
  }
  /deep/ .handItem {
    margin-bottom: 5px!important;
  }
  /deep/ .el-button + .el-button {
    margin-left: 5px;
  }
  /deep/ .legend {
    margin-top: 8px;
    padding-left: 10px;
    height: 24px;
    color: #ffffff;
    line-height: 24px;
    border-radius: 3px;
  }
  /deep/ .timeSelect {
    width: 120px;
  }
  /deep/ .timeSelect .el-input__inner {
    height: 24px;
  }
  /deep/ .seachnav {
    width: 60%;
    height: 50px;
    position: fixed;
    z-index: 2;
    top: 0;
    bottom: 0;
    line-height: 50px;
  }
  /deep/ .returnnormalpress{
    vertical-align: middle;
  }
  /deep/ .equiplist{
    vertical-align: middle;
    cursor: pointer;
    margin-left: 20px;
  }
  /deep/ .organizationTable{
    width: 100%;
    height: 800px;
    background-color: #fff;
  }
  /deep/ .el-button + .el-button {
    margin-left: 5px;
  }
  /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #409EFF;
    color: #fff;
  }
  /***********列表样式***********/
  li.alarmBody{
    width: 100%;
    min-height: 30px;
    border-bottom: 1px solid #E2E2E2;
  }
  .alarmContent{
    width: inherit;
    min-height: 40px;
  }
  /deep/ el-table__row{
    width: 100%;
    height: 40px;
    line-height: 40px;
  }
  /deep/ .el-table td{
    padding: 8px 0;
    border-top: 1px solid #efefef;
    border-bottom: none;
  }
  /deep/ .el-table::before{
    background-color: #fff;
  }
  .leftIcon{
    float: left;
  }
  .alarmTitle{
    line-height: 30px;
    display: inline-flex;
  }
  .rightTitle{
    font-size: 14px;
    text-indent: 10px;
  }
  .tableBtn{
    width: 620px;
    height: 40px;
    border-right: 1px solid #e0e0e0;
    border-collapse:collapse;
  }
  .btnNav > td{
    text-indent: 5px;
    border-right: 1px solid #e0e0e0;
  }
  .btnNav > td:nth-child(6){
    border-right: none;
  }
  .btnNav > td:nth-child(1){
    text-indent: 0;
  }
  .dataBody{
    width: 100%;
    height: 760px;
    max-height: 760px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-top: 0px;
    padding-left: 10px;
    border: 1px solid #e0e0e0;
    border-left: none;
    border-bottom: none;
    list-style: none;
  }
  /deep/ .el-table-column--selection .cell{
    padding-left: 8px;
    padding-right: 0;
  }
  /deep/ .el-checkbox{
    width: 20px;
    display: inline-block;
  }
  /deep/ .el-table::before{
    height: 0;
  }
  .tableBottomBtn{
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-top: 1px solid #e0e0e0;
    border-right: 1px solid #e0e0e0;
  }
  .circle{
    padding-top: 5px;
    /*display: inline-block;*/
    /*height: 10px;*/
    /*!*width: 10px;*!*/
    /*border-radius: 50%;*/
  }
  .bottomBtn{
    width: 70px;
    height: 24px;
    border-radius: 4px;
    background-color: #0072F3;
    color: #fff;
    outline: none;
    border: none;
  }
  .bottomBtn:nth-child(1){
    width: 60px;
  }
  /deep/ .full-calendar-body .dates .more-events {
    width: 250px;
  }
  /*滚动条样式*/
  /deep/ .dataBody::-webkit-scrollbar {/*滚动条整体样式*/
    width: 13px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }
  /deep/ .dataBody::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    /*border-radius: 5px;*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    background: #DDDDDD;
  }
  /deep/ .dataBody::-webkit-scrollbar-track {/*滚动条里面轨道*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    border-radius: 0;
    background: #F5F5F5;
  }
</style>
